<template>
<div>
  <slot>
<div class="honor">
				<div class="comm">
					<h1>荣誉资质</h1>
					<span>honor</span>
				</div>
				<div id="certify">
 <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
            <div class="swiper-slide"  v-for="item in banner" :style="{backgroundImage:'url('+item.img+')'}"></div>
          <!-- <div class="swiper-slide" style="background-image:url('../assets/ry11.jpg')"></div>
          <div class="swiper-slide" style="background-image:url('../assets/ry11.jpg')"></div>
          <div class="swiper-slide" style="background-image:url('../assets/ry11.jpg')"></div>
          <div class="swiper-slide" style="background-image:url('../assets/ry11.jpg')"></div> -->
    </div>

    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

    <!-- Add Arrows -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
			</div>
			<!--ryzz-->
      </slot>
</div>
</template>
 <script>
// import Swiper from "swiper" 
//  import 'swiper/dist/css/swiper.css'
    export default{
       name:'Honour',
       data(){
           return{
             banner:[
                 {
                     img:require('../assets/ry111.jpg')
                 },
                  {
                     img:require('../assets/produ.jpg')
                 },
                  {
                     img:require('../assets/ry111.jpg')
                 }
             ]
           }
       },
        mounted(){
         
            var swiper = new Swiper('.swiper-container', {
      effect: 'flip',
       navigation: {
                nextEl: '.swiper-button-next',   
                prevEl: '.swiper-button-prev',
            },
      grabCursor: true,
     paginationClickable: true,
     pagination:".swiper-pagination",
     autoplay: false,
    
    navigation: {
     
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  }
    })
       }
     

    }
     
    
</script>
<style>
@import '../../static/swiper.css';
  .swiper-container {
      width: 6.98rem;
      height: 5.24rem;
      
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 6.98rem;
      height: 5.24rem;
    }



</style>